<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:core="http://www.contact.core.com/contacts/core/ui"
      xmlns:a4j="http://richfaces.org/a4j">


<h:form>

    <rich:panel style="overflow:auto;border:none" id="friendLeftContentPanel" bodyClass="rich-laguna-panel-no-header">
        <!--<a4j:outputPanel style="float:left; margin-top:10px; margin-bottom:15px" layout="block">-->
        <!--<h:outputLabel value="Friends"/>-->
        <!--</a4j:outputPanel>-->

        <core:searchTable value="#{friendBean.filterFriend}"
                          label="#{resources.searchFriendsLabel}"
                          reRender="#{rich:clientId('allFriendSearchTable')}"
                          />

        <!--<h:panelGrid columns="2" style="margin-top:20px; margin-bottom:5px;width:100%; border: 1px solid #BDC7D8;">-->
            <!--<h:graphicImage value="./style/images/search.PNG"/>-->
            <!--<h:inputText id="filterFriendInput" autocomplete="on"-->
                         <!--value="#{friendBean.filterFriend}"-->
                         <!--style="max-width:100%; margin:1px; content:'Search Friends';"-->
                         <!--styleClass="search"-->
                         <!--onblur="if(this.value==null || this.value.length == 0){this.value='Search Friends'; this.style.color='gray';}"-->
                         <!--onclick="this.value=null; this.style.color='black'">-->
                <!--<a4j:support event="onkeyup" reRender="#{rich:clientId('allFriendSearchTable')}"-->
                             <!--ignoreDupResponses="true"-->
                             <!--requestDelay="700"/>-->
            <!--</h:inputText>-->
        <!--</h:panelGrid>-->


        <rich:panelMenu style="width:100%"
                        selectedChild="#{friendBean.meniOption}"
                        iconExpandedGroup="disc" iconCollapsedGroup="disc"
                        iconExpandedTopGroup="chevronUp" iconGroupTopPosition="right"
                        iconCollapsedTopGroup="chevronDown">

            <rich:panelMenuItem name="allConnection"
                                label="#{resources.allConnectionLabel}"
                                action="#{friendBean.menuOptionView}"
                                reRender="friendSearchPanel , friendLeftContentPanel">
                <f:param name="menuOptionView" value="allConnection"/>
            </rich:panelMenuItem>

            <rich:panelMenuItem name="recentlyAdded"
                                label="#{resources.recentlyAddedLabel}"
                                action="#{friendBean.menuOptionView}"
                               reRender="friendSearchPanel , friendLeftContentPanel">
                <f:param name="menuOptionView" value="recentlyAdded"/>
            </rich:panelMenuItem>


        </rich:panelMenu>

        <a4j:outputPanel style="float:left; margin-top:10px; margin-bottom:15px" layout="block">
            <h:outputLabel value="Lists"/>
        </a4j:outputPanel>

        <rich:panelMenu style="width:100%"
                        selectedChild="#{friendBean.meniOption}"
                        iconExpandedGroup="disc" iconCollapsedGroup="disc"
                        iconExpandedTopGroup="chevronUp" iconGroupTopPosition="right"
                        iconCollapsedTopGroup="chevronDown">

            <rich:panelMenuItem name="friends"
                                label="#{resources.friendsLabel}"
                                action="#{friendBean.menuOptionView}"
                              reRender="friendSearchPanel , friendLeftContentPanel">
                <f:param name="menuOptionView" value="friends"/>
            </rich:panelMenuItem>

        </rich:panelMenu>

        <!--<a4j:outputPanel style="float:right" layout="block">-->
            <!--<a4j:commandLink value="Add New List"/>-->
        <!--</a4j:outputPanel>-->
    </rich:panel>

</h:form>
</html>
